<!-- 组件html内容 -->
<template>
  <!-- 一定要有一个根标签div class属性值是组件名称 -->
  <div class="UserIndex">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input v-model="searchData.userName" placeholder="用户名搜索..."></el-input>
      </el-col>
      <el-col :span="3">
        <el-button @click="search" type="primary">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col>
        <el-button @click="add" type="success">添加用户</el-button>
        <el-button @click="moreDelete" type="danger">批量删除</el-button>
        <el-button @click="exporExcl">数据导出</el-button>
      </el-col>
    </el-row>

    <el-row style="margin-top: 10px;">
      <el-table  border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="55">
        </el-table-column>

        <el-table-column prop="userName" label="用户名" width="180">
        </el-table-column>

        <el-table-column prop="realName" label="真实姓名" width="180">
        </el-table-column>

        <el-table-column prop="sex" label="性别">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.sex==1">男</el-tag>
            <el-tag v-else type="success">女</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="telNumber" label="手机" width="180">
        </el-table-column>

        <el-table-column prop="userState" label="账号状态" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.userState==1" type="success">正常</el-tag>
            <el-tag v-else type="danger">锁定</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="lastLoginTime" label="最后一次登录时间" width="180">
          <template slot-scope="scope">
            {{ milTimeToDateStr(scope.row.lastLoginTime) }}
          </template>
        </el-table-column>

        <el-table-column prop="lastLoginIP" label="最后一次登录IP" width="180">
        </el-table-column>



        <el-table-column fixed="right" label="操作" align="center" width="190">

          <template slot-scope="scope">
            <el-button @click="rowShow(scope.row)"  size="mini" icon="el-icon-search" title="查看"></el-button>
            <el-button @click="rowEdit(scope.row)" type="primary" size="mini" icon="el-icon-edit" title="编辑"></el-button>
            <el-button @click="rowDelete(scope.row)" type="danger" size="mini" icon="el-icon-delete" title="删除"></el-button>
          </template>

        </el-table-column>

      </el-table>
    </el-row>

    <el-row style="margin-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pager.currentPage" :page-sizes="[5, 10, 20, 30, 100]" :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
      </el-pagination>
    </el-row>

    <!-- 添加、编辑、查看三合一弹窗  v-show -->
    <el-dialog :title="formState==1?'添加':formState==2?'编辑':'查看'" :visible.sync="dialogState"
      :close-on-click-modal="false" v-if="dialogState" width="50%">

      <!-- 添加、编辑、查看三合一组件 -->
      <AddEditShow @needClose="needClose" :formState="formState" :editOrShowData="nowEditOrShowData">
      </AddEditShow>

    </el-dialog>

  </div>
</template>

<!-- 组件js部分 -->
<script>
  import AddEditShow from '@/components/user/addEditShow.vue';

  export default {
    name: 'UserIndex', //组件的名称-要和文件名相同（驼峰规则命名）
    components: { // 注册组件
      AddEditShow
    },
    data() {
      return {
        // 三合一弹窗的状态设置 1 添加 2 编辑 3 查看
        formState: 1,
        // 当前需要查看或编辑的行数据
        nowEditOrShowData: {
          userID: null,
        },
        // 添加、编辑、查看弹窗状态
        dialogState: false,
        pager: {
          // 当前的页码
          currentPage: 1,
          pageSize: 5, // 每页显示的行数
          total: 100, // 数据的总条目数
        },
        // 当前表格复选框选中的数据
        nowSelectList: [],
        // 搜索表单对象
        searchData: {
          userName: null,
          age: null
        },
        // 表格原始数据
        tableData: []
      }
    },
    mounted() {
      this.initTable();
    },
    methods: {
      // 时间戳日期转日期字符串
      milTimeToDateStr(param){
        let date = new Date(param);

        let dateStr = date.getFullYear() + "-" + (parseInt(date.getMonth()+1)) + "-" + date.getDate() + " "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

        return dateStr;
      },
      // 点击搜索
      search() {
        this.initTable();
      },
      // 点击重置
      reset() {
        // 1.清空表单
        this.searchData = {
          userName: null,
          age: null
        };

        // 2.再查询表格数据
        this.initTable();
      },
      // 渲染表格方法
      initTable() {
        // TODO: 查询后端接口渲染表格数据
        let _this = this;
        this.$axios.get('/user/getUserPagers', {
            params: {
              // GET请求参数
              userName: _this.searchData.userName,
              page: _this.pager.currentPage,
              size: _this.pager.pageSize
            }
          }) // http://localhost:25100/api/user/getUserByID/101
          .then(function(res) {
            console.dir("--分页查询--");
            if (res.data.code == 200) { // 业务成功
              _this.$message.success(res.data.msg);
              _this.tableData = res.data.data.rows;
              _this.pager.total = res.data.data.total;
            } else {
              _this.$message.error(res.data.msg);
            }
          })
          .catch(function(error) { // 请求失败处理
            console.log(error);
          });
      },
      // 表格上方操作-添加
      add() {
        this.formState = 1;
        // 1. 准备需要传递到子组件的数据
        this.nowEditOrShowData = {
          userID: null,
        };
        // TODO: 1. 打开弹窗
        this.dialogState = true;
      },
      // 表格上方的-批量删除
      moreDelete() {
        // TODO：1. 判断表格是否选中数据  2.再删除
        if (this.nowSelectList.length == 0) { //没有数据的
          this.$message.error('亲~您要先点击复选框选择要删除的数据再进行删除~');
        } else { // 问询是否真的要删除
          let _this = this;
          this.$confirm('您确认要删除这【' + this.nowSelectList.length + '】行数据吗?', '删除提示', {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => { // 点击确定时进去

          let ids = "";

          for(var index in _this.nowSelectList){
            ids += _this.nowSelectList[index].userID+",";
          }
          ids = ids.substring(0,ids.length-1);

          _this.deleteData(ids); //101,102

          }).catch(() => { // 点击取消时进入

          });
        }
      },
      // 表格上方的-导出数据
      exporExcl() {
        // TODO： 根据现有的查询条件导出完整数据
      },
      // 表格行操作-查看
      rowShow(row) {
        this.formState = 3;
        // 1. 准备需要传递到子组件的数据
        this.nowEditOrShowData.userID = row.userID;
        // 2.打开弹窗
        this.dialogState = true;
      },
      // 表格行操作-编辑
      rowEdit(row) {
        this.formState = 2;
        // 1. 准备需要传递到子组件的数据
        this.nowEditOrShowData.userID = row.userID;
        // 2.打开弹窗
        this.dialogState = true;
      },
      // 表格的行操作-删除
      rowDelete(row) {
        let _this = this;
        this.$confirm('您确认要删除这行数据吗?', '删除提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 点击确定时进去
          _this.deleteData(row.userID);
        }).catch(() => { // 点击取消时进入

        });
      },
      // 删除接口调用方法
      deleteData(ids) {
        let _this = this;
        this.$axios.delete('/user/deleteUser?userID='+ids)
          .then(function(res) { // 请求成功 HTTP状态码是200
            // res参数：封装了请求响应、请求参数、请求配置等等信息
            // 后端响应数据：res.data
            console.dir(res.data);
            if (res.data.code == 200) {
              _this.$message.success(res.data.msg);
              _this.initTable();
            } else {
              _this.$message.error(res.data.msg);
            }
          })
          .catch(function(error) { // 请求失败处理
            console.log(error);
          });
      },
      // 表格选中或取消选中复选框触发的回调
      handleSelectionChange(param) {
        // param: 当前选中的表格数据
        this.nowSelectList = param;
      },
      // 当分页条目数切换时
      handleSizeChange(param) {
        // param: 每页显示的行数
        this.pager.pageSize = param;
        // 再查询数据
        this.initTable();
      },
      // 当选中页码时回调
      handleCurrentChange(param) {
        // param: 当前选中的页码数
        this.pager.currentPage = param;
        // 再查询数据
        this.initTable();
      },
      // 当添加、编辑、详情组件关闭弹窗时
      needClose(param) {
        this.dialogState = false;
        if (param != 3) {
          this.initTable();
        }
      }
    },
    watch: {

    }
  }
</script>

<!-- 3.组件的css样式部分 scoped：当前声明的样式只提供给当前组件使用 -->
<style scoped>

</style>
